const staff_event_message = {
    template:`
<div>
                        <div class="d-flex justify-content-between flex-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                            <h1 class="h2">Message Board</h1>
                            <div class="btn-toolbar mb-2 mb-md-0">
                                <div class="btn-group mr-2">
                                    <button @click="$router.go(-1)" class="btn btn-secondary btn-sm">Back</button>
                                </div>
                            </div>
                        </div>
                        <div class="border messages_box px-2 py-2" ref="message_box">
                            <div class="text-center my-2" v-if="messages == null">
                                <span class="not_has_message_bg text-light px-4 py-1">Not has message yet</span>
                            </div>
                            <div class="item mt-4 " v-for="(item,index) in messages" :key="index" :class="'re_reply-'+item.is_reply"> 
                                <span class="d-block text-secondary messages_date">{{item.created_datetime}}</span>
                                <span class="content">{{item.content}}</span>
                            </div>
                        </div>
                        
                        <div class="messages_input_box mt-4">
                            <div class="form-group">
                                <div class="input-group">
                                    <textarea class="form-control" placeholder="Leave a message~" v-model="form.content"></textarea>
                                    <button class="btn btn-primary" @click="send_message">Send</button>
                                </div>
                            </div>
                        </div>
                    </div>    
    `,
    props:['event_id'],
    data() {
        return {
            messages:null,
            timer:null,
            form:{
                content:null,
                is_reply:1,
            }
        };
    },
    methods:{
        get_messages(){
            ajax.get(`message/${this.event_id}`).then(res=>{
                if (res.status === 200){
                    this.messages = res.data.data;
                }
            })
        },
        send_message(){
            ajax.post(`message/${this.event_id}`,this.form).then(res=>{
                if (res.status === 200){
                    this.get_messages();
                }
            })
        }
    },
    mounted(){
        this.get_messages();
        this.timer = setInterval(()=>{
            this.get_messages();
        },1000)
    },
    updated(){
        this.$refs.message_box.scrollTop = this.$refs.message_box.scrollHeight;
    },
    destroyed() {
        clearInterval(this.timer);
    }
};